<template>
  <el-dialog
    modal-class="select-prod-dialog"
    v-model="visible"
    title="选择商品"
    width="1200"
    align-center
    :show-close="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="clickClose"
  >
    <template #header>
      <span class="f18"><i class="icon"></i>选择商品</span>
    </template>
    <selectCom ref="selectComRef" :optionInfo="optionInfoSelect" @changeCate="changeCate" />
    <template #footer>
      <div class="dialog-footer">
        <div class="left">
          <p>
            共<i style="font-style: normal; color: #86909c"> {{ selectComBackObj.total }} </i>个搜索结果
          </p>
          <p class="mr45" style="color: #86909c">
            已选中：<el-button type="primary" link style="font-size: 18px" @click="drawer = true">
              {{ selectComBackObj.selected.length }}
            </el-button>
          </p>
        </div>
        <div class="right">
          <el-button type="info" @click="clickClose">取消</el-button>
          <el-button type="primary" @click="submit" :disabled="selectComBackObj.selected.length <= 0">确认</el-button>
        </div>
      </div>
    </template>

    <!-- 已选中的sku -->
    <el-drawer
      v-model="drawer"
      class="jzt-drawer"
      :title="'已选中：' + selectComBackObj.selected.length"
      modal-class="sku-selected-drawer"
      :before-close="
        () => {
          drawer = false;
        }
      "
    >
      <div class="selected-table-wrap">
        <el-table class="jzt-table" :data="selectedData" stripe style="width: 100%">
          <template #empty>
            <el-empty description="这里暂时什么都没有" />
          </template>
          <el-table-column prop="date" fixed show-overflow-tooltip label="商品信息" width="360">
            <template #default="scope">
              <div class="col1">
                <div>
                  <div class="left">
                    <img :src="scope.row.mainPicUrl" alt="" />
                  </div>
                  <div class="right">
                    <h3 class="name">{{ scope.row.productAliasName }}</h3>
                    <p style="white-space: break-spaces">{{ scope.row.skuProperties }}</p>
                    <p>SKU编码：{{ scope.row.skuCode }}</p>
                    <p>ID：{{ scope.row.productId }}</p>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="brandName" show-overflow-tooltip label="品牌" width="200" />
          <el-table-column prop="modeCode" show-overflow-tooltip label="型号" width="135" />
          <el-table-column prop="productUnit" show-overflow-tooltip label="单位" width="135">
            <template #default="scope">
              {{ useCodeArrStore().getDictName("shop_unit", scope.row.productUnit) }}
            </template>
          </el-table-column>
          <el-table-column prop="factoryName" show-overflow-tooltip label="供应商" width="224">
            <template #default="scope">{{ scope.row.factoryName }}</template>
          </el-table-column>
          <el-table-column fixed="right" show-overflow-tooltip label="操作" width="80">
            <template #default="scope">
              <el-button type="danger" link @click="delTempProductFun(scope.row)">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-drawer>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";
const route = useRoute();
import { Search } from "@element-plus/icons-vue";
import prodDetail from "./prodDetail.vue";
import selectCom from "./selectCom.vue";
// import { packageAddMaterial, inventoryAddMaterial, delTempProduct } from "@/apis/quote-price/following";
import useCodeArrStore from "@/store/modules/select";
import { delTempProductOrder, batchSaveProduct } from "@/apis/createFile";

const selectComRef = ref();
const visible = ref(false);
const treeData = ref([]);
const list = ref([]);
const optionInfoDetail = ref({
  isShow: false,
  detail: {}
});
const drawer = ref(false); //选中的sku抽屉
const selectedData = ref([]);
const isOpen = ref(false); //是否打开更多筛选抽屉
const filterData = ref([]);
const optionInfoSelect = ref({ productType: 0, isMounted: true });

const emit = defineEmits(["close", "submit"]);
const props = defineProps({
  optionInfo: {
    type: Object,
    default: () => {
      return {
        isShow: false,
        orderObj: {},
        detailList: []
      };
    }
  }
});
watch(
  () => props.optionInfo.isShow,
  async val => {
    visible.value = val;

    //生成临时code-时间戳
    console.log("生成临时code-时间戳");
    localStorage.setItem("followingObj", JSON.stringify({ _time: new Date().getTime() }));
    if (val) {
      selectComRef.value && selectComRef.value.refresh();
    }
    optionInfoSelect.value.detailList = props.optionInfo.detailList;
  },
  { deep: true }
);

const delTempProductFun = item => {
  delTempProductOrder({
    businessSkuId: item.businessSkuId,
    code: JSON.parse(localStorage.getItem("followingObj"))._time
  }).then(res => {
    if (res.code === 200) {
      selectComRef.value.getTempProductListFun(); //查询暂存的商品sku
    }
  });
};

//组件返回的选中sku列表和查询商品的total
const selectComBackObj = ref({ total: 0, selected: [] }); //商品组件返回的obj
const changeCate = obj => {
  selectComBackObj.value = obj;
  selectedData.value = obj.selected;
  console.log("组件返回的数据===", obj);
};

const openSku = item => {
  optionInfoDetail.value.isShow = true;
  optionInfoDetail.value.detail = {
    collectId: "1820316466522288128",
    productId: "1819566676956082176",
    productAliasName: "新工厂上架",
    businessId: "1805501818016428032",
    collectStatus: null,
    businessProductStatus: null,
    factoryId: null,
    isFactoryQa: null,
    isFactoryAddress: null,
    businessModelCode: null,
    businessGrade: null,
    isShowSale: 1,
    businessSaleNum: null,
    businessAddSaleNum: null,
    businessShowSaleNum: 0,
    collectTime: null,
    businessLowestPrice: "70.00",
    isSpecialPrice: null,
    skuNum: null,
    defaultOrder: null,
    fristCategoryId: null,
    mainPicUrl: "https://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/mall/2024-08-03/Dingtalk_202407061534241722653387615.jpg",
    productName: "新工厂上架",
    factoryLowestPrice: "100.00",
    sliderPicIds: "1722653387506",
    sliderPicUrlList: [
      "https://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/mall/2024-08-03/Dingtalk_202407061534241722653387615.jpg"
    ],
    sliderVedioId: "1722653393378",
    sliderVedioUrl:
      "https://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/mall/2024-08-03/%E5%BA%8A%E8%A7%86%E9%A2%911722653393507.mp4",
    brandId: null,
    brandName: null,
    appearTime: "2024-09-07",
    contentId: "1819566677773971456",
    productPrizeInfoId: null,
    productPrizeInfo: null,
    delistType: 0,
    sourceType: 1,
    delistTime: null,
    listingTime: null,
    collectState: 0,
    categoryId: null,
    categoryName: null,
    content: "<p>11</p>",
    collectLabelIds: [],
    collectLabels: [],
    statsList: null,
    specificationList: [
      {
        specificationId: "1818116580871696384",
        specificationName: "纸板材质",
        sort: null,
        speType: 3,
        sortOrder: 1,
        children: [
          {
            productSpecificationId: "1819566764797390848",
            productId: "1819566676956082176",
            specificationValId: null,
            specificationVal: "大小",
            statsText: "https://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/mall/2024-08-03/Dingtalk_202407021055361722653451245.jpg",
            sort: null,
            skuId: "1819566677186768896",
            listingStatus: 1,
            propTemplate: null,
            propTemplateVal: null
          },
          {
            productSpecificationId: "1819566764797390848",
            productId: "1819566676956082176",
            specificationValId: null,
            specificationVal: "颜色",
            statsText: "https://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/mall/2024-08-03/Dingtalk_202407021053471722653459335.jpg",
            sort: null,
            skuId: "1819566677572644864",
            listingStatus: 1,
            propTemplate: null,
            propTemplateVal: null
          }
        ]
      }
    ],
    skuList: [
      {
        id: "1820316466539065344",
        skuId: "1819566677186768896",
        businessId: "1805501818016428032",
        productId: "1819566676956082176",
        productName: null,
        modeCode: null,
        code: "SKU2024080300005",
        properties:
          '[{"specificationId":1818116580871696384,"specificationName":"纸板材质","specificationValId":1818118013117460480,"specificationVal":"大小","speType":3,"sort":1,"statsText":"https://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/mall/2024-08-03/Dingtalk_202407021055361722653451245.jpg"}]',
        factoryPrice: "100.00",
        factoryPreferentialPrice: null,
        factoryRealPrice: "100.00",
        factoryStock: 1000,
        clinetPrice: "70.00",
        clinetPreferentialPrice: null,
        clinetRealPrice: "70.00",
        businessListingStatus: 1,
        listingStatus: null,
        productUnit: 1,
        skuStatus: 1,
        delTag: 0,
        partNum: 100,
        wzSkuId: null
      },
      {
        id: "1820316466539065345",
        skuId: "1819566677572644864",
        businessId: "1805501818016428032",
        productId: "1819566676956082176",
        productName: null,
        modeCode: null,
        code: "SKU2024080300006",
        properties:
          '[{"specificationId":1818116580871696384,"specificationName":"纸板材质","specificationValId":1818116657598099456,"specificationVal":"颜色","speType":3,"sort":1,"statsText":"https://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/mall/2024-08-03/Dingtalk_202407021053471722653459335.jpg"}]',
        factoryPrice: "100.00",
        factoryPreferentialPrice: null,
        factoryRealPrice: "100.00",
        factoryStock: 1000,
        clinetPrice: "70.00",
        clinetPreferentialPrice: null,
        clinetRealPrice: "70.00",
        businessListingStatus: 1,
        listingStatus: null,
        productUnit: 1,
        skuStatus: 1,
        delTag: 0,
        partNum: 100,
        wzSkuId: null
      }
    ],
    points: []
  };
};
const close = () => {
  optionInfoDetail.value.isShow = false;
};

onMounted(async () => {});

const reset = () => {
  selectedData.value = [];
  selectComBackObj.value = { ...selectComBackObj.value, selected: [] };
  selectComRef.value.reset();
};

const clickClose = () => {
  reset();
  emit("close");
};
const submit = () => {
  batchSaveProduct({
    skuList: selectedData.value,
    orderId: props.optionInfo.orderObj.orderId,
    code: JSON.parse(localStorage.getItem("followingObj"))._time
  }).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: "商品添加成功",
        type: "success"
      });
      reset();
      emit("submit");
    }
  });
};
</script>

<style lang="scss">
.select-prod-dialog {
  .el-dialog {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    .el-dialog__header {
      border-bottom: 1px solid #e2e8f0;
      padding-left: 20px;
    }
    .el-dialog__footer {
      padding-top: 0;
    }
  }
  .dialog-footer {
    box-shadow: 0px -3px 10px 0px rgba(4, 24, 48, 0.1);
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    .left {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      p:nth-of-type(2) {
        display: flex;
        align-items: center;
      }
    }
    .right {
      .el-button {
        font-size: 14px !important;
      }
    }
    .el-button {
      font-size: 18px;
    }
  }
  .list-item {
    border-radius: 2px;
    margin: 0 0px 10px 0;
    width: 50%;
    box-sizing: border-box;
    & > div {
      position: relative;
      background-color: #f5f7fa;
    }
    &:nth-of-type(2n + 1) {
      padding-right: 10px;
    }
    &:nth-of-type(2n) {
      padding-left: 10px;
    }

    .el-checkbox {
      position: absolute;
      top: 40px;
      left: 10px;
    }
    .prod-info {
      min-height: 100px;
      font-size: 16px;
      position: relative;
      .info {
        flex: 1;
      }
      .img {
        width: 80px;
        height: 80px;
        border-radius: 4px;
        background-color: #eee;
        margin-right: 20px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 4px;
        }
      }
      h3 {
        font-size: 16px;
        color: #3d3d3d;
        line-height: 22px;
      }
      p {
        font-size: 12px;
        line-height: 20px;
        color: #86909c;
      }
      .top {
        display: flex;
        padding: 10px;
        // padding-left: 46px;
      }
      footer {
        padding: 10px;
        border-top: 1px solid #e1e6ed;
        & > div {
          display: flex;
          justify-content: space-between;
        }
        p {
          flex: 1;
        }
        .tips {
          font-size: 12px;
          color: #86909c;
          margin: 0 -10px;
          margin-top: 10px;
          padding: 10px 10px 0 10px;
          line-height: 20px;
          border-top: 1px solid #e1e6ed;
        }
      }
      .warehouse-icon {
        position: absolute;
        right: 0;
        top: 0;
        background-color: #d9edff;
        border-radius: 12px 0px 0px 12px;
        font-size: 12px;
        line-height: 24px;
        padding: 0 9px 0 15px;
      }
    }
  }
}
.sku-selected-drawer.el-overlay {
  .el-drawer {
    width: 1160px !important;
    box-shadow: -8px 0px 16px 0px rgba(0, 38, 73, 0.1);
    border-radius: 10px 0px 0px 10px;
  }
  .el-drawer__header {
    border: 1px solid #dcdfe6;
    margin-bottom: 0;
    padding-bottom: 24px;
    color: #131414;
    font-size: 18px;
  }
  .el-drawer__footer {
    box-shadow: 0px -3px 10px 0px rgba(4, 24, 48, 0.1);
    padding: 14px 20px;
  }
  .col1 {
    & > div {
      display: flex;
    }

    .left {
      img {
        width: 80px;
        height: 80px;
        border-radius: 4px;
      }
    }
    .right {
      padding-left: 18px;
      .name {
        font-size: 14px;
        color: #3d3d3d;
        margin-bottom: 5px;
      }
      p {
        font-size: 12px;
        color: #86909c;
        margin-bottom: 5px;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.icon {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #007dff;
  margin-right: 6px;
  margin-bottom: 2px;
}
:deep(.el-tree) {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 94px;

  .el-icon.el-tree-node__expand-icon {
    padding-left: 10px;
  }

  .el-tree-node__content {
    line-height: 32px;
    height: 32px;
  }
  .el-tree-node.is-current > .el-tree-node__content {
    background-color: #d9e8ff !important;
    color: #1a1a1a;

    .custom-tree-node i {
      color: #1a1a1a !important;
    }
  }
}

.el-button--primary {
  // --el-button-bg-color: #424e66;
  border: none;
}
.el-button.el-button--info {
  --el-color-info: #f2f3f5;
  --el-color-white: #1d2129;
  &:hover {
    --el-button-hover-bg-color: #f2f3f5 !important;
    border-color: #f2f3f5 !important;
  }
}
.products-list-wrap {
  height: 600px;
  overflow: auto;
  :deep(.el-container) {
    height: 99%;
  }
  :deep(.el-aside) {
    padding-top: 10px;
  }
  :deep(.el-main) {
    border-left: 1px solid #e2e8f0;
    padding: 0 20px !important;
    & > .left {
      .action-wrap {
        position: sticky;
        top: 0;
        z-index: 2;
        background-color: white;
        height: 72px;
        display: flex;
        align-items: center;
        .sort-wrap {
          display: flex;
          align-items: center;
          i {
            font-style: normal;
            display: inline-block;
            margin: 0 4px;
          }
          & > div {
            display: flex;
            align-items: center;
          }
          .right {
            & > div {
              display: flex;
              align-items: center;
            }
          }
        }
      }
      .list-wrap {
        display: flex;
        flex-wrap: wrap;
      }
    }
  }
}
</style>
